<!--  -->
<template>
    <!-- <img id="imgOne" src='@/assets/R-C.jpg' /> -->
    <div class="boufei" id="boufeis">
        <div class="boufei1">
            <div class="bfList" ref="wrappersc" >
                <div ref="wrappers" id="biankuang">
                    <p></p>
                    <div id="wra-div"></div>
                </div>
            </div>
        </div>
        <div class="boufei2">
            <div class="boufei2-1">
                <a-space>
                    <span>字体大小:</span>
                    <a-select popup-container="html"  class="bacClass" v-model="dataList.fontSize" :style="{ width: '160px', height: '30px' }">
                        <a-option>12</a-option>
                        <a-option>14</a-option>
                        <a-option>16</a-option>
                        <a-option>18</a-option>
                        <a-option>20</a-option>
                        <a-option>22</a-option>
                        <a-option>24</a-option>
                        <a-option>26</a-option>
                        <a-option>28</a-option>
                        <a-option>30</a-option>
                        <a-option>32</a-option>
                        <a-option>34</a-option>
                        <a-option>36</a-option>
                        <a-option>38</a-option>
                        <a-option>40</a-option>
                        <a-option>42</a-option>
                        <a-option>44</a-option>
                        <a-option>46</a-option>
                        <a-option>48</a-option>
                        <a-option>50</a-option>
                        <a-option>52</a-option>
                        <a-option>54</a-option>
                        <a-option>56</a-option>
                    </a-select>
                    <span>颜色:</span><input type="color" v-model="dataList.colors">
                    <span>是否加粗:</span>
                    <a-select popup-container="html"  class="bacClass" v-model="dataList.fontWidth" :style="{ width: '160px', height: '30px' }">
                        <a-option>正常</a-option>
                        <a-option>加粗</a-option>
                    </a-select>
                    <a-button size="mini" type="primary" @click="tjTable">添加一行</a-button>
                    <a-button size="mini" type="primary" @click="scTable">删除一行</a-button>
                </a-space>
            </div>
            <div class="boufeiBj">
                <div ref="wrappers1" class="buju">
                    <div>
                        <div draggable="true" @click="ztDx" id="planOrderCode">{织布单号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="customOrderNo">{客户订单号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="customName">{客户名称}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="pieceWeight">{公斤/匹}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="pieceNum">{匹数}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="weaveCode">{织造序号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="greyCode">{坯布编号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="greyName">{坯布名称}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="greyBatchNo">{坯布批号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="yarnCount">{纱支}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="yarnBatch">{纱牌}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="brandName">{纱批}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="customProductName">{品名}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="customNameRaw">{供应商名称}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="drawnNeedleState">{抽针}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="workDrum">{针筒}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="typeDate">{类型}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="width">{门幅}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="weight">{克重}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="colorName">{颜色}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="machineCode">{机台号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="storey">{机位号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="outSouringCompany">{加工单位}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="verifyClothCompany">{验布单位}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="orderDepartment">{下单部门}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="rubberTube">{胶管}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="startHorseNo">{开始匹号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="auditDate">{审核日期}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="recordCode">{记录单号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="endHorseNo">{结束匹号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="auditPerson">{审核人}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="pihao">(*必填){匹号}</div>
                    </div>
                    <div>
                        <div draggable="true" @click="ztDx" id="jibuhaos">(*必填){机布号}</div>
                    </div>
                </div>
                <div class="boufei2-2">
                    <a-space>
                        <span>自定义文本</span> <input type="text" v-model="dataList.zdy" @blur="zdys">
                        <span>宽</span>
                        <a-space>
                            <a-button type="primary" size="mini" @click="brderDs">+</a-button>
                            <a-button type="primary" size="mini" @click="brderJs">-</a-button>
                        </a-space>
                        <span>高</span>
                        <a-space>
                            <a-button type="primary" size="mini" @click="brderDs1">+</a-button>
                            <a-button type="primary" size="mini" @click="brderJs1">-</a-button>
                        </a-space>
                    </a-space>
                    <div ref="wrappers2"></div>
                    <div ref="wrappers3" class="wrappers2-1">
                        <table draggable="true" ref="tables" id="tables">
                            <tr v-for="item in tableList">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    <div class="wrappers2-2">
                        <div>
                            <span>客户名称:</span><input type="text" v-model="dataList.khmc">
                        </div>
                        <div>
                            <span>模板名称:</span><input type="text" v-model="dataList.mbmc">
                        </div>
                        <div>
                            <span>&nbsp;变&nbsp;框&nbsp;宽:&nbsp;</span><input type="text" v-model="dataList.width"
                                @change="isBoufeiWidth"><span class="spanCM">CM</span>
                        </div>
                        <div>
                            <span>&nbsp;边&nbsp;框&nbsp;高:&nbsp;</span><input type="text" v-model="dataList.height"
                                @change="isBoufeiHeight"><span class="spanCM">CM</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <a-button html-type="submit" type="primary" @click="print">打印</a-button> -->
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import emitter from '@/hooks/useEventBus'
import { post } from '@/api/http'
import { Message } from '@arco-design/web-vue'
// import printJS from 'print-js'


// const print = () => {
//     printJS({
//         printable: 'biankuang',
//         type: 'html',
//         targetStyles: ['*'],
//         // scanStyles:false
//     })
// }

const props = defineProps({
    pageData: Object
})
const pageDatas: any = props.pageData
// const emit = defineEmits(['update:pageDatas'])
const dataList = reactive({
    fontSize: '',
    colors: '',
    fontWidth: '',
    zdy: '',
    khmc: '',
    mbmc: '',
    id: 0,
    height: '',
    width: ''
})

let tableList:any = ref([
    { id: 1 },
])

function gx() {
    emitter.emit('pudataTab')
}

const tjTable = () => {
    tableList.value.push({ id: 1 })

    // }
}

let widths = 50
let heights = 30
const brderDs = () => {
    widths += 10
    spanHtml.value.style.width = widths + 'px'
    spanHtml.value.style.textAlign = 'center'
}

const brderJs = () => {
    widths -= 10
    spanHtml.value.style.width = widths + 'px'
    spanHtml.value.style.textAlign = 'center'
}
const brderDs1 = () => {
    widths += 10
    heights += 1
    spanHtml.value.style.height = heights + 'px'
    spanHtml.value.style.lineHeight = heights + 'px'
}

const brderJs1 = () => {
    heights -= 1
    spanHtml.value.style.height = heights + 'px'
    spanHtml.value.style.lineHeight = heights + 'px'
}


emitter.on("bcBoufei", (key: any) => {
    if (dataList.khmc != '' && dataList.mbmc != '') {
        wrappers.value.children.forEach((o: any) => {
            o.style.border = ''
        })
        let zhOuterHTML = wrappers.value.outerHTML
        let midChar = ">";
        let midChars = '<'
        let str = zhOuterHTML.slice(zhOuterHTML.indexOf(midChar) + 1)
        let strs = str.slice(0, str.lastIndexOf(midChars))
        if (key == '新增布飞模板') {
            post({
                url: 'planSingle/clothfiyprintmodel/add',
                data: [{
                    modelName: dataList.mbmc,
                    customName: dataList.khmc,
                    modelDetail: strs,
                    width: dataList.width,
                    height: dataList.height
                }]
            }).then((res: any) => {
                if (res.code === 200) {
                    Message.success('保存成功')
                    pageDatas.showAdd = false
                    gx()
                    tableList.value = [{id:1}]
                } else {
                    Message.error(res.message)
                }
            })
        } else {
            post({
                url: 'planSingle/clothfiyprintmodel/update',
                data: [{
                    id: dataList.id,
                    modelName: dataList.mbmc,
                    customName: dataList.khmc,
                    modelDetail: strs,
                    width: dataList.width,
                    height: dataList.height
                }]
            }).then((res: any) => {
                if (res.code === 200) {
                    Message.success('修改成功')
                    // <img src=\"/src/assets/R-C.jpg\" data-v-974fcf04=\"\">
                    wrappers.value.innerHTML = "<p></p>"
                    for (let item in dataList) {
                        dataList[item] = ''
                    }
                    pageDatas.showAdd = false
                    gx()
                    tableList.value = [{id:1}]
                }
            })
        }
    } else {
        Message.error('客户名称,模板名称不能为空！')
        return
    }
});

let isTables = ref(true)
emitter.on('updataBoufei', (key: any) => {
    isTables.value = false
    dataList.id = key.id
    if (key.width != '') {
        if (wrappersc.value) {
            wrappersc.value.style.width = Number(key.width) / 2.45 * js_getDPI()[0] + 'px'
        }
    } else {
        if (wrappersc.value) {
            wrappersc.value.style.width = '364px'
        }
    }
    if (key.height != '') {
        if (wrappersc.value) {
            wrappersc.value.style.height = Number(key.height) / 2.45 * js_getDPI()[0] + 'px'
        }
    } else {
        if (wrappersc.value) {
            wrappersc.value.style.height = '792px'
        }
    }
    wrappers.value.innerHTML = key.modelDetail
    dataList.khmc = key.customName
    dataList.mbmc = key.modelName
    dataList.width = key.width
    dataList.height = key.height
    wrappers.value.childNodes.forEach((item: any) => {
        item.ondragstart = function (el: any) {
            spanHtml.value = this
            spanHtml.value.onclick = function () {
                spanHtml.value = el.target
                spanHtml.value.style.fontSize = dataList.fontSize + 'px'
                spanHtml.value.style.color = dataList.colors
                spanHtml.value.style.fontWeight = dataList.fontWidth == '加粗' ? '1000' : '400'
                // if (spanHtml.value.style.border) {
                //     spanHtml.value.style.border = ''
                // } else {
                //     spanHtml.value.style.border = '1px solid black'
                //     spanHtml.value.style.display = 'block'
                // }
            }
        }
    })
})
emitter.on('qxXg', () => {
    // <img src=\"/src/assets/R-C.jpg\" data-v-974fcf04=\"\">
    tableList.value = [{id:1}]
    wrappers.value.innerHTML = "<p></p>"
    for (let item in dataList) {
        dataList[item] = ''
    }
    isTables.value = true
})
const scTable = () => {
    tableList.value.pop()
    // if (!isTables.value) {
    //     let table: any = document.getElementById('tables')
    //     let id = table.childNodes.length - 1
    //     let nodes = table.childNodes;
    //     let ndoe = nodes[id]
    //     table.removeChild(ndoe)
    // }
}
let wrappers = ref()
let wrappers1 = ref()
let spanHtml = ref()
let wrappers2 = ref()
let tables = ref()
let wrappers3 = ref()
let wrappersc = ref()
onMounted(() => {
    let pagex = 0
    let pagey = 0
    let xx = 0
    let yy = 0
    let targetx = 0
    let targety = 0

    wrappers.value.addEventListener('dragover', function (ev: any) {
        ev.preventDefault()
        wrappers.value.onmousemove = function (e: any) {
            pagex = e.pageX
            pagey = e.pageY
            xx = wrappers.value.getBoundingClientRect().left
            yy = wrappers.value.getBoundingClientRect().top
            targetx = pagex - xx;
            targety = pagey - yy;
        }
    })
    wrappers.value.addEventListener('drop', function () {
        setTimeout(() => {
            wrappers.value.appendChild(spanHtml.value)
            spanHtml.value.style.border = '1px solid black'
            spanHtml.value.style.position = 'absolute'
            spanHtml.value.style.left = targetx - spanHtml.value.offsetWidth / 2 + 'px'
            spanHtml.value.style.top = targety - spanHtml.value.offsetHeight / 2 + 'px'
        }, 100)
    })
    for (let i = 0; i < wrappers1.value.children.length; i++) {
        wrappers1.value.children[i].children[0].ondragstart = function () {
            spanHtml.value = this
            // spanHtml.value.style.color = 'green'
        }
    }

    tables.value.ondragstart = function () {
        spanHtml.value = this
    }
    wrappers1.value.addEventListener('dragover', function (ev: any) {
        ev.preventDefault()
    })

    wrappers1.value.addEventListener('drop', function () {
        spanHtml.value.style = ''
        let div = document.createElement("div")
        div.appendChild(spanHtml.value)
        wrappers1.value.appendChild(div)
    })

    wrappers3.value.addEventListener('dragover', function (ev: any) {
        ev.preventDefault()
    })
    wrappers3.value.addEventListener('drop', function () {
        wrappers3.value.appendChild(spanHtml.value)
    })

})
const ztDx = (el?: any) => {
    spanHtml.value = el.target
    spanHtml.value.style.fontSize = dataList.fontSize + 'px'
    spanHtml.value.style.color = dataList.colors
    spanHtml.value.style.fontWeight = dataList.fontWidth == '加粗' ? '1000' : '400'
    // if (spanHtml.value.style.border) {
    //     spanHtml.value.style.border = ''
    // } else {
    //     spanHtml.value.style.border = '1px solid black'
    //     spanHtml.value.style.display = 'block'
    // }
}
const zdys = () => {

    let div = wrappers1.value.children[0]
    let divs = div.cloneNode()
    let span = wrappers1.value.children[0].children[0]
    let spans = span.cloneNode()
    spans.removeAttribute('id')
    spans.innerText = dataList.zdy
    spans.onclick = function (el: any) {
        spanHtml.value = el.target
        spanHtml.value.style.fontSize = dataList.fontSize + 'px'
        spanHtml.value.style.color = dataList.colors
        spanHtml.value.style.fontWeight = dataList.fontWidth == '加粗' ? '1000' : '400'
        // if (spanHtml.value.style.border) {
        //     spanHtml.value.style.border = '' 
        // } else {
        //     spanHtml.value.style.border = '1px solid black'
        //     spanHtml.value.style.display = 'block'
        // }
    }
    spans.ondragstart = function () {
        spanHtml.value = this
    }
    spanHtml.value = spans
    divs.appendChild(spans)
    wrappers2.value.appendChild(divs)
    dataList.zdy = ''
}

function js_getDPI() {
    var arrDPI = new Array();
    if (window.screen?.deviceXDPI != undefined) {
        arrDPI[0] = window.screen?.deviceXDPI;
        arrDPI[1] = window.screen?.deviceYDPI;
    }
    else {
        var tmpNode: any = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);
    }
    return arrDPI;
}

const isBoufeiWidth = () => {

    if (dataList.width == '') {
        wrappersc.value.style.width = "364px"
    } else {
        wrappersc.value.style.width = Number(dataList.width) / 2.45 * js_getDPI()[0] + 'px'
    }
}
const isBoufeiHeight = () => {
    if (dataList.height == '') {
        wrappersc.value.style.height = "792px"
    } else {
        wrappersc.value.style.height = Number(dataList.height) / 2.45 * js_getDPI()[0] + 'px'
    }
}


emitter.on('chushihuamoban', () => {
    wrappersc.value.style.width = '364px'
    wrappersc.value.style.height = '792px'
    let planOrderCode: any = document.getElementById('planOrderCode')
    planOrderCode.innerHTML = '{织布单号}'
    let customOrderNo: any = document.getElementById('customOrderNo')
    customOrderNo.innerHTML = '{客户订单号}'
    let customName: any = document.getElementById('customName')
    customName.innerHTML = '{客户名称}'
    let pieceWeight: any = document.getElementById('pieceWeight')
    pieceWeight.innerHTML = '{公斤/匹}}'
    let pieceNum: any = document.getElementById('pieceNum')
    pieceNum.innerHTML = '{匹数}'
    let weaveCode: any = document.getElementById('weaveCode')
    weaveCode.innerHTML = '{织造序号}'
    let greyCode: any = document.getElementById('greyCode')
    greyCode.innerHTML = '{坯布编号}'
    let greyName: any = document.getElementById('greyName')
    greyName.innerHTML = '{坯布名称}'
    let greyBatchNo: any = document.getElementById('greyBatchNo')
    greyBatchNo.innerHTML = '{坯布批号}'
    let yarnCount: any = document.getElementById('yarnCount')
    yarnCount.innerHTML = '{纱支}'
    let yarnBatch: any = document.getElementById('yarnBatch')
    yarnBatch.innerHTML = '{纱牌}'
    let brandName: any = document.getElementById('brandName')
    brandName.innerHTML = '{纱批}'
    let customProductName: any = document.getElementById('customProductName')
    customProductName.innerHTML = '{客户品名}'
    let drawnNeedleState: any = document.getElementById('drawnNeedleState')
    drawnNeedleState.innerHTML = '{抽针}'
    let workDrum: any = document.getElementById('workDrum')
    workDrum.innerHTML = '{针筒}'
    let typeDate: any = document.getElementById('typeDate')
    typeDate.innerHTML = '{类型}'
    let width: any = document.getElementById('width')
    width.innerHTML = '{门幅}'
    let weight: any = document.getElementById('weight')
    weight.innerHTML = '{克重}'
    let colorName: any = document.getElementById('colorName')
    colorName.innerHTML = '{颜色}'
    let machineCode: any = document.getElementById('machineCode')
    machineCode.innerHTML = '{机台号}'
    let storey: any = document.getElementById('storey')
    storey.innerHTML = '{机位号}'
    let outSouringCompany: any = document.getElementById('outSouringCompany')
    outSouringCompany.innerHTML = '{加工单位}'
    let verifyClothCompany: any = document.getElementById('verifyClothCompany')
    verifyClothCompany.innerHTML = '{验布单位}'
    let orderDepartment: any = document.getElementById('orderDepartment')
    orderDepartment.innerHTML = '{下单部门}'
    let rubberTube: any = document.getElementById('rubberTube')
    rubberTube.innerHTML = '{胶管}'
    let startHorseNo: any = document.getElementById('startHorseNo')
    startHorseNo.innerHTML = '{开始匹号}'
    let auditDate: any = document.getElementById('auditDate')
    auditDate.innerHTML = '{审核日期}'
    let recordCode: any = document.getElementById('recordCode')
    recordCode.innerHTML = '{记录单号}'
    let endHorseNo: any = document.getElementById('endHorseNo')
    endHorseNo.innerHTML = '{结束匹号}'
    let auditPerson: any = document.getElementById('auditPerson')
    auditPerson.innerHTML = '{审核人}'
    let customNameRaw: any = document.getElementById('customNameRaw')
    customNameRaw.innerHTML = '{供应商名称}'
    let pihao: any = document.getElementById('pihao')
    pihao.innerHTML = '(*必填){匹号}'
    let jibuhaos: any = document.getElementById('jibuhaos')
    jibuhaos.innerHTML = '(*必填){机布号}'
})

emitter.on('chushihuamoban1', () => {
    let planOrderCode: any = document.getElementById('planOrderCode')
    planOrderCode.innerHTML = '{织布单号}'
    let customOrderNo: any = document.getElementById('customOrderNo')
    customOrderNo.innerHTML = '{客户订单号}'
    let customName: any = document.getElementById('customName')
    customName.innerHTML = '{客户名称}'
    let pieceWeight: any = document.getElementById('pieceWeight')
    pieceWeight.innerHTML = '{公斤/匹}}'
    let pieceNum: any = document.getElementById('pieceNum')
    pieceNum.innerHTML = '{匹数}'
    let weaveCode: any = document.getElementById('weaveCode')
    weaveCode.innerHTML = '{织造序号}'
    let greyCode: any = document.getElementById('greyCode')
    greyCode.innerHTML = '{坯布编号}'
    let greyName: any = document.getElementById('greyName')
    greyName.innerHTML = '{坯布名称}'
    let greyBatchNo: any = document.getElementById('greyBatchNo')
    greyBatchNo.innerHTML = '{坯布批号}'
    let yarnCount: any = document.getElementById('yarnCount')
    yarnCount.innerHTML = '{纱支}'
    let yarnBatch: any = document.getElementById('yarnBatch')
    yarnBatch.innerHTML = '{纱牌}'
    let brandName: any = document.getElementById('brandName')
    brandName.innerHTML = '{纱批}'
    let customProductName: any = document.getElementById('customProductName')
    customProductName.innerHTML = '{客户品名}'
    let drawnNeedleState: any = document.getElementById('drawnNeedleState')
    drawnNeedleState.innerHTML = '{抽针}'
    let workDrum: any = document.getElementById('workDrum')
    workDrum.innerHTML = '{针筒}'
    let typeDate: any = document.getElementById('typeDate')
    typeDate.innerHTML = '{类型}'
    let width: any = document.getElementById('width')
    width.innerHTML = '{门幅}'
    let weight: any = document.getElementById('weight')
    weight.innerHTML = '{克重}'
    let colorName: any = document.getElementById('colorName')
    colorName.innerHTML = '{颜色}'
    let machineCode: any = document.getElementById('machineCode')
    machineCode.innerHTML = '{机台号}'
    let storey: any = document.getElementById('storey')
    storey.innerHTML = '{机位号}'
    let outSouringCompany: any = document.getElementById('outSouringCompany')
    outSouringCompany.innerHTML = '{加工单位}'
    let verifyClothCompany: any = document.getElementById('verifyClothCompany')
    verifyClothCompany.innerHTML = '{验布单位}'
    let orderDepartment: any = document.getElementById('orderDepartment')
    orderDepartment.innerHTML = '{下单部门}'
    let rubberTube: any = document.getElementById('rubberTube')
    rubberTube.innerHTML = '{胶管}'
    let startHorseNo: any = document.getElementById('startHorseNo')
    startHorseNo.innerHTML = '{开始匹号}'
    let auditDate: any = document.getElementById('auditDate')
    auditDate.innerHTML = '{审核日期}'
    let recordCode: any = document.getElementById('recordCode')
    recordCode.innerHTML = '{记录单号}'
    let endHorseNo: any = document.getElementById('endHorseNo')
    endHorseNo.innerHTML = '{结束匹号}'
    let auditPerson: any = document.getElementById('auditPerson')
    auditPerson.innerHTML = '{审核人}'
    let customNameRaw: any = document.getElementById('customNameRaw')
    customNameRaw.innerHTML = '{供应商名称}'
    let pihao: any = document.getElementById('pihao')
    pihao.innerHTML = '(*必填){匹号}'
    let jibuhaos: any = document.getElementById('jibuhaos')
    jibuhaos.innerHTML = '(*必填){机布号}'
})

</script>
<style lang='less'>
@import '@/styles/boufeiList.less';

#boufeis{
    display: flex;
}

.boufeiBj {
    width: 100%;
    height: 100%;
    display: flex;

    .buju {
        width: 48%;
        height: 50%;
        margin-top: 20px;
        font-size: 12px;
        position: relative;

        div {
            display: inline-block;
            width: 48%;
            height: 5%;

        }
    }

    .boufei2-2 {
        margin-top: 20px;
        width: 48%;
        height: 90%;
        position: relative;


        input {
            border: 1px solid #000;
            border-radius: 5px;
        }

        .wrappers2-1 {
            width: 100%;
            height: 50%;

            table {
                position: absolute;
                top: 40%;
                left: 5%;
                width: 90%;
                border: 1px solid #000;
                border-collapse: collapse;
                tr {
                    width: 100%;
                    height: 30px
                }

                td {
                    border: 1px solid #000;
                }
            }
        }

        .wrappers2-2 {
            width: 100%;
            height: 50%;

            div {
                padding: 10px;
            }
        }
    }
}

input {
    text-indent: 10px;
}
</style>